Polymerjs Google Map元素用于在网站上显示Google Map。
<
google-map latitude = "17.77591" longitude = "-524.41144" api-key = "4586">
<
/google-map>
你可以使用googlemap-directions来显示startAddress和endAddress之间的地图方向。
<
google-map-directions map="[[map]]"start-address = "United States" end-address = "Mountain View">
<
/google-map-directions>
运行以下命令以在你的项目目录中安装google-map元素。之后, 你可以在应用程序中使用此元素:
bower install PolymerElements/google-map -save
例:
【Polymerjs Google地图】创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中google-mapelement的用法。
<
!DOCTYPE html>
<
html>
<
head>
<
title>
google-map<
/title>
<
meta name = "viewport" content = "width = device-width, initial-scale = 1">
<
script src = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.min.js">
<
/script>
<
link rel = "import"href = "https://rawgit.com/Download/polymer-cdn/master/lib/google-map/google-map.html">
<
style>
google-map {height: 250px;
width: 380px;
border: 2px solid black;
margin: 25px 20px 20px 20px;
}<
/style>
<
/head>
<
body>
<
h2>
Google-Map Example<
/h2>
<
demo-map>
<
/demo-map>
<
dom-module id = "demo-map">
<
template>
<
google-map map = "{{map}}" latitude = "37.779" longitude = "-122.3892">
<
/google-map>
<
/template>
<
/dom-module>
<
script>
Polymer ({is: "demo-map", properties: {Address: {type: String, value: "San Francisco"}, map: "demo-map"}});
<
/script>
<
/body>
<
/html>
推荐阅读
- Polymer Google客户端加载器
- Polymerjs Google环聊按钮
- Polymer Google Analytics(分析)查询
- Polymerjs gold-phone-input元素
- Polymerjs Google图表
- Polymerjs gold-email-input元素
- Polymerjs事件处理详解
- Polymerjs gold元素
- Polymerjs gold-cc-input元素