Question

我正在尝试创建一个基于给定坐标添加标记的函数，但似乎添加单个位置的简单操作不起作用，除了Google地图的当前位置标记，因为map会不断更新自己，标记将会消失，这就是代码：

<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
      #map-canvas {
        width: 400px;
        height: 300px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition, showError);
    }
	}
	function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('map-canvas')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

function initialize() {
 var myLatlng = new google.maps.LatLng(33.8903964,35.497148);
 

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'new location!'
  }); 
}
  </script>
  </head>
  <body onload="getLocation()">
  <div data-role="page" id="pageone">
   <div data-role="header" data-theme="a">
    <a href="Welcome.php" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Welcome To My Homepage</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>
  </div>
    <div data-role="main">
	<div id="x"></div>
    <div id="map-canvas"></div><br/>	 
	<button onclick="initialize()">hey</button>
	</div>
	
  </body>
</html>

Answer 1

首先将地图和标记设置为全局变量：

<script>
var map, marker;
...
</script>

重构你的初始化函数以创建它们：

function initialize() {
    var myLatlng = new google.maps.LatLng(33.8903964, 35.497148);

    var myOptions = {
        center: myLatlng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'new location!'
    });
}

然后更新showPosition函数以更新其坐标：

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon);

    marker.setPosition(latlon);
    marker.setTitle("You are here!");
    map.setCenter(latlon);
}

然后修改HTML，使其在加载时调用initialize，然后在响应用户点击时调用getLocation。

  <body onload="initialize()">
    <div id="map-canvas"></div><br/>     
    <button onclick="getLocation()">hey</button>
  </body>

如何将多个标记添加到移动位置谷歌地图，Javascript

1 个答案: