javascript - 一个文件中的简单折线和标记
问题描述
我正在尝试创建一个静态 html 页面，该页面显示步行道的折线以及沿途城镇的标记。我一直在使用 Google Maps API 站点提供的 html 示例文件。我有两个数组（一个用于折线，一个用于标记）。我可以创建一个示例文件来显示折线和一个示例文件来显示标记。
---------- 这是折线示例--------
<script>
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: {
lat: 43.3473702427,
lng: -1.7866905872
},
mapTypeId: "terrain"
});
const flightPlanCoordinates = [
{
lat: 43.3473702427,
lng: -1.7866905872
},
{
lat: 43.3473476954,
lng: -1.7865623441
},
{
lat: 43.3473729249,
lng: -1.7862672172
},
{
lat: 43.3474351186,
lng: -1.7861244734
},
{
lat: 43.3474754356,
lng: -1.7859851662
},
{
lat: 43.347496558,
lng: -1.7858726811
},
{
lat: 43.3475023415,
lng: -1.7857427616
},
{
lat: 43.3474533912,
lng: -1.7856312823
},
{
lat: 43.3467171248,
lng: -1.7854733672
},
{
lat: 43.3458278049,
lng: -1.7851600517
},
{
lat: 43.3450604416,
lng: -1.7848521005
},
{
lat: 43.3443607204,
lng: -1.7850081716
},
{
lat: 43.3441632427,
lng: -1.7851468921
},
{
lat: 43.3423870336,
lng: -1.7862907704
},
{
lat: 43.3423038851,
lng: -1.7863221187
},
{
lat: 43.3422126062,
lng: -1.7863554787
},
{
lat: 43.3421186451,
lng: -1.7864152417
},
{
lat: 43.3419943415,
lng: -1.786458157
},
{
lat: 43.341907924,
lng: -1.7864865717
},
{
lat: 43.3418141305,
lng: -1.7864960432
},
{
lat: 43.3395636734,
lng: -1.7880662251
},
{
lat: 43.3394773398,
lng: -1.7880819831
},
{
lat: 43.3393750805,
lng: -1.7881052848
},
{
lat: 43.3393117134,
lng: -1.7881597672
},
{
lat: 43.3392953686,
lng: -1.7882843222
},
{
lat: 43.3392989729,
lng: -1.78845305
},
{
lat: 43.3393396251,
lng: -1.788651282
},
{
lat: 43.3393413853,
lng: -1.7887586541
},
{
lat: 43.3393360209,
lng: -1.7888663616
},
{
lat: 43.3393474203,
lng: -1.7890360951
},
{
lat: 43.3393621724,
lng: -1.7891617399
},
{
lat: 43.3393969573,
lng: -1.7892939225
},
{
lat: 43.3394075185,
lng: -1.7894147895
},
{
lat: 43.3393995557,
lng: -1.7894981895
},
{
lat: 43.3400335629,
lng: -1.7926760204
},
{
lat: 43.3403750416,
lng: -1.7943606991
},
{
lat: 43.3404274285,
lng: -1.794564547
},
{
lat: 43.3405581024,
lng: -1.7947906069
},
{
lat: 43.3408577554,
lng: -1.7962014489
},
{
lat: 43.3409312647,
lng: -1.7964569293
},
{
lat: 43.3410289977,
lng: -1.7968221288
},
{
lat: 43.341086749,
lng: -1.797145335
},
{
lat: 43.3411341906,
lng: -1.7975875642
},
{
lat: 43.341227565,
lng: -1.7978497501
},
{
lat: 43.3414114639,
lng: -1.7980664223
},
{
lat: 43.3415769227,
lng: -1.7981714476
},
{
lat: 43.3416830376,
lng: -1.7983020376
},
{
lat: 43.3418867178,
lng: -1.7984791473
},
{
lat: 43.3423764724,
lng: -1.7990746815
},
{
lat: 43.3427510597,
lng: -1.7992604245
},
{
lat: 43.3428710885,
lng: -1.7993480153
},
{
lat: 43.3431115653,
lng: -1.7995948624
},
{
lat: 43.3436958678,
lng: -1.8000118621
},
{
lat: 43.34389125,
lng: -1.800135579
},
{
lat: 43.3441171423,
lng: -1.8003076594
},
{
lat: 43.3442825172,
lng: -1.8004375789
},
{
lat: 43.3444631472,
lng: -1.8005764671
},
{
lat: 43.3446667437,
lng: -1.8007254135
},
{
lat: 43.3448162768,
lng: -1.8008333724
},
{
lat: 43.3448740281,
lng: -1.8008811492
},
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
//------- 结束折线示例 -----
//------- 开始标记示例 -----
<script>
let map;
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: {
lat: 43.3062762022,
lng: -2.7221442573
},
mapTypeId: "terrain"
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(
43.3062762022,
-2.7221442573
),
type: "parking",
},
{
position: new google.maps.LatLng(
43.279026635,
-2.3127149418
),
type: "parking",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
</script>
*/
解决方案
只创建一次地图。然后将折线和标记添加到该地图。
代码片段：
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 9,
center: {
lat: 43.3473702427,
lng: -1.7866905872
},
mapTypeId: "terrain"
});
const flightPlanCoordinates = [
{
lat: 43.3473702427,
lng: -1.7866905872
},
{
lat: 43.3473476954,
lng: -1.7865623441
},
{
lat: 43.3473729249,
lng: -1.7862672172
},
{
lat: 43.3474351186,
lng: -1.7861244734
},
{
lat: 43.3474754356,
lng: -1.7859851662
},
{
lat: 43.347496558,
lng: -1.7858726811
},
{
lat: 43.3475023415,
lng: -1.7857427616
},
{
lat: 43.3474533912,
lng: -1.7856312823
},
{
lat: 43.3467171248,
lng: -1.7854733672
},
{
lat: 43.3458278049,
lng: -1.7851600517
},
{
lat: 43.3450604416,
lng: -1.7848521005
},
{
lat: 43.3443607204,
lng: -1.7850081716
},
{
lat: 43.3441632427,
lng: -1.7851468921
},
{
lat: 43.3423870336,
lng: -1.7862907704
},
{
lat: 43.3423038851,
lng: -1.7863221187
},
{
lat: 43.3422126062,
lng: -1.7863554787
},
{
lat: 43.3421186451,
lng: -1.7864152417
},
{
lat: 43.3419943415,
lng: -1.786458157
},
{
lat: 43.341907924,
lng: -1.7864865717
},
{
lat: 43.3418141305,
lng: -1.7864960432
},
{
lat: 43.3395636734,
lng: -1.7880662251
},
{
lat: 43.3394773398,
lng: -1.7880819831
},
{
lat: 43.3393750805,
lng: -1.7881052848
},
{
lat: 43.3393117134,
lng: -1.7881597672
},
{
lat: 43.3392953686,
lng: -1.7882843222
},
{
lat: 43.3392989729,
lng: -1.78845305
},
{
lat: 43.3393396251,
lng: -1.788651282
},
{
lat: 43.3393413853,
lng: -1.7887586541
},
{
lat: 43.3393360209,
lng: -1.7888663616
},
{
lat: 43.3393474203,
lng: -1.7890360951
},
{
lat: 43.3393621724,
lng: -1.7891617399
},
{
lat: 43.3393969573,
lng: -1.7892939225
},
{
lat: 43.3394075185,
lng: -1.7894147895
},
{
lat: 43.3393995557,
lng: -1.7894981895
},
{
lat: 43.3400335629,
lng: -1.7926760204
},
{
lat: 43.3403750416,
lng: -1.7943606991
},
{
lat: 43.3404274285,
lng: -1.794564547
},
{
lat: 43.3405581024,
lng: -1.7947906069
},
{
lat: 43.3408577554,
lng: -1.7962014489
},
{
lat: 43.3409312647,
lng: -1.7964569293
},
{
lat: 43.3410289977,
lng: -1.7968221288
},
{
lat: 43.341086749,
lng: -1.797145335
},
{
lat: 43.3411341906,
lng: -1.7975875642
},
{
lat: 43.341227565,
lng: -1.7978497501
},
{
lat: 43.3414114639,
lng: -1.7980664223
},
{
lat: 43.3415769227,
lng: -1.7981714476
},
{
lat: 43.3416830376,
lng: -1.7983020376
},
{
lat: 43.3418867178,
lng: -1.7984791473
},
{
lat: 43.3423764724,
lng: -1.7990746815
},
{
lat: 43.3427510597,
lng: -1.7992604245
},
{
lat: 43.3428710885,
lng: -1.7993480153
},
{
lat: 43.3431115653,
lng: -1.7995948624
},
{
lat: 43.3436958678,
lng: -1.8000118621
},
{
lat: 43.34389125,
lng: -1.800135579
},
{
lat: 43.3441171423,
lng: -1.8003076594
},
{
lat: 43.3442825172,
lng: -1.8004375789
},
{
lat: 43.3444631472,
lng: -1.8005764671
},
{
lat: 43.3446667437,
lng: -1.8007254135
},
{
lat: 43.3448162768,
lng: -1.8008333724
},
{
lat: 43.3448740281,
lng: -1.8008811492
},
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(
43.3062762022, -2.7221442573
),
type: "parking",
},
{
position: new google.maps.LatLng(
43.279026635, -2.3127149418
),
type: "parking",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async></script>推荐阅读
- javascript - 保持 div 相对于图像定位
- haskell - 带有函数参数的函数是否已柯里化？
- php - 数组不使用 sort() 或 asort() 按字母顺序排序
- c++ - 为什么这种类型是 double 而不是 float？
- python - 如何使用 Pyspark 计算 RDD 的平均值
- multiprocessing - 如何保存在 python 中使用两个单独的处理器运行的两个函数的输出？
- python-3.x - 在 cur.execute 中作为 var 的表
- python - TypeError：使用字典检查数组时，字符串索引必须是整数
- c# - 使用 UTC 转换获取时区
- visual-studio-code - 如何访问本地超级账本结构